<template>
  <div>
    <headlist title="我的" />
    <div class="box">
      <!-- <div class="login"> -->
      <div
        id="head"
        v-if="!$store.state.users.token"
        @click="$router.push('/login')"
      >
        <img src="/favicon.ico" alt="" />
        <p id="name">立即登录</p>
      </div>
      <!-- </div> -->
      <!-- 登录的状态 -->
    <div class="login" v-else>
      <!-- 头部嘻嘻你 -->
      <div class="login-head">
        <div class="login-head-left">
          <van-image
            round
            width="1.5rem"
            height="1.5rem"
            :src="userInfo.photo"
          />
          <span>{{userInfo.name}}</span>
        </div>
        <van-button size="mini" round>编辑资料</van-button>
      </div>
      <van-row>
        <van-col :span="6">
          <p>{{userInfo.follow_count}}</p>
          <p>关注</p>
        </van-col>
        <van-col :span="6">
          <p>{{userInfo.art_count}}</p>
          <p>头条</p>
        </van-col>
        <van-col :span="6">
          <p>{{userInfo.fans_count}}</p>
          <p>粉丝数</p>
        </van-col>
        <van-col :span="6">
          <p>{{userInfo.like_count}}</p>
          <p>获赞</p>
        </van-col>
      </van-row>
    </div>
    <!-- 登录的状态 -->
    </div>
    <van-notice-bar
      left-icon="volume-o"
      mode="closeable"
      text="在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。"
      v-show="$store.state.users.token"
    />
    <van-grid :column-num="2">
      <van-grid-item icon="clock-o" text="历史" dot />
      <van-grid-item icon="star-o" text="收藏" badge="99+" />
    </van-grid>
    <p></p>
    <van-cell title="实名信息" is-link v-show="$store.state.users.token" />
    <van-cell title="客服" is-link />
    <van-cell title="设置" is-link />
    <van-cell title="小智同学" is-link />
    <p></p>
    <van-cell
      title="分享"
      @click="showShare = true"
      v-show="$store.state.users.token"
    />
    <van-share-sheet
      v-model="showShare"
      title="立即分享给好友"
      :options="options"
    />
    <p></p>
    <!-- <van-button type="primary" >块级元素</van-button> -->
    <van-button
      type="danger"
      @click="out"
      v-show="$store.state.users.token"
      block
      >退出登录</van-button
    >
  </div>
</template>
<script>
import headlist from "../compon/head";
export default {
  components: {
    headlist,
  },
  data() {
    return {
      showShare: false,
      userInfo:{},
      options: [
        [
          { name: "微信", icon: "wechat" },
          { name: "朋友圈", icon: "wechat-moments" },
          { name: "微博", icon: "weibo" },
          { name: "QQ", icon: "qq" },
        ],
        [
          { name: "复制链接", icon: "link" },
          { name: "分享海报", icon: "poster" },
          { name: "二维码", icon: "qrcode" },
          { name: "小程序码", icon: "weapp-qrcode" },
        ],
      ],
    };
  },
  mounted(){
        this.getUserInfo();
        
      },
  methods: {
    out() {
      this.$store.commit("out");
      this.$router.push("/login");
    },
    getUserInfo() {
      this.$axios.get("/v1_0/user").then((res) => {
        console.log(res);
        this.userInfo = res.data;
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.box {
  width: 100%;
  height: 200px;
  background: #1989fa;
  overflow: hidden;
}
#head {
  width: 80px;
  height: 80px;
  background: #fff;
  border-radius: 50%;
  margin: 30px auto;
  img {
    width: 100%;
    height: 100%;
  }
  #name {
    font-size: 18px;
    font-weight: 700;
    margin: 0;
    text-align: center;
  }
}
.login {
  width: 100%;
  height: 200px;
  background: #3196fa;
  font-size: 22px;
  color: #f8f8f8;
  .login-head {
    display: flex;
    width: 100%;
    padding: 10px;
    justify-content: space-between;
    box-sizing: border-box;
    align-items: center;
    .login-head-left {
      display: flex;
      align-items: center;
      span {
        padding-left: 5px;
      }
    }
  }
  .van-row {
    margin-top: 15px;
    .van-col {
      text-align: center;
    }
  }
}
.van-cell-group {
  margin-top: 10px;
}
</style>